<template>
	<view class="c-container">
		<y-home-comp-title exist='true' main="dsdfsdfsd" sub="sccvsdf"></y-home-comp-title>
		<view class="c-card">
			<view class="c-body">
				<view class="item" v-for="i in [1,2,3,4]" :key="i">
					<view class="l" style="background-image: url('../../static/home/t2.png');"></view>
					<view class="r">
						<view class="main">擦玻璃</view>
						<view class="sub">阳光不打折</view>
						<view class="tag">现时8折</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import yHomeCompTitle from './yHomeCompTitle.vue'
	export default {
		data() {
			return {

			};
		},
		components: {
			yHomeCompTitle
		}
	}
</script>

<style lang="scss" scoped>
	.c-container {
		.c-card {
			clear: both;
			padding: 0 20upx;

			&:only-child {
				margin-top: 30upx;
			}

			.c-body {
				background-color: white;
				border-radius: 20upx;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;

				.item {
					box-sizing: border-box;
					height: 160upx;
					width: 50%;
					min-width: 50%;
					max-width: 50%;
					border-top: 2upx solid $uni-border-color;
					position: relative;

					&:nth-child(odd) {
						border-right: 2upx solid $uni-border-color;
					}

					&:nth-child(1),
					&:nth-child(2) {
						border-top: none;
					}

					.l {
						height: 100%;
						width: 128upx;
						margin-left: 24upx;
						background-size: contain;
						background-position: center;
					}

					.r {
						text-align: right;
						position: absolute;
						right: 30upx;
						top: 30upx;

						.main {
							color: #030303;
							font-size: 28upx;
							line-height: 40upx;
							font-weight: bold;
						}

						.sub {
							color: #A2A2A2;
							font-size: 20upx;
							line-height: 28upx;
							margin-top: 2upx;
						}

						.tag {
							color: white;
							background-color: #D48366;
							line-height: 28upx;
							padding: 0 14upx;
							margin-top: 12upx;
							font-size: 20upx;
						}
					}
				}
			}
		}
	}
</style>
